<style scoped>
.gradient {
    width: 100%;
    padding: 20px 20px;
    --borderWidth: 3px;
    display: flex;
    background: var(--bg1);
    position: relative;
    border-radius: var(--borderWidth);
    align-items: center;
    cursor: pointer;
}

.gradient:after {
    --borderWidth: 3px;
    content: "";
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(
        60deg,
        #f79533,
        #f37055,
        #ef4e7b,
        #a166ab,
        #5073b8,
        #1098ad,
        #07b39b,
        #6fba82
    );
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

svg {
    fill: var(--txt);
}

.txt {
    margin-left: 10px;
}

.img {
    width: 52px;
    height: 52px;
}
</style>

<template>
    <div class="gradient" @click="openUrl">
        <div>
            <img class="img" v-lazy="item.img" alt="" />
        </div>
        <p class="txt">{{ item.title }}</p>
    </div>
</template>

<script setup>
const props = defineProps(["item"]);

const openUrl = () => {
    window.open(props.item.uri, "_self");
};
</script>
